<template>
  <!-- 头部部分 -->
  <header class="header">
    <h1>todos</h1>
    <input  class="new-todo" placeholder="请输入任务名称" autofocus  @keyup.enter="addList" v-model.trim="todoName"/>
  </header>
</template>

<script>
export default {
  data () {
    return {
      todoName: ''
    }
  },
  methods: {
    // add () {
    //   if (this.todoName.trim() === '') return
    //   // 通过触发事件的方式，向老父亲发起修改数据的申请
    //   this.$emit('add', this.todoName)     
    //   // 清空内容
    //   this.todoName = '' 
    // }
    addList(){
      if(!this.todoName) return alert('内容不能为空')
      this.$emit('addList', this.todoName)
      this.todoName=''
    }
  },
 
}
</script>

<style></style>
